.console-mirror {
  height: 100%;
  display: flex;
  flex-direction: column;

  .console-snapshot {
    display: flex;
    align-items: center;
    gap: var(--stratakit-space-x1);
    padding: var(--stratakit-space-x1);
    cursor: pointer;
    user-select: none;
    border-bottom: var(--stratakit-ext-border-border) solid
      var(--stratakit-color-border-neutral-muted);

    .title {
      /* Match the height of buttons to avoid flow shifts when adding them */
      height: 24px;
      align-content: center;
      margin-right: var(--stratakit-space-x1);
    }

    .spacer {
      flex-grow: 100;
    }
  }

  &:not(.expanded) .clear-button {
    display: none;
  }

  .logs {
    overflow: auto;
    padding: 0 var(--stratakit-space-x2);

    .message {
      display: flex;
      gap: var(--stratakit-space-x2);
      margin: var(--stratakit-space-x1);
      padding: var(--stratakit-space-x1) 0 var(--stratakit-space-x05);
      font-family: var(--stratakit-font-family-mono);
    }
    .message + .message {
      border-top: var(--stratakit-ext-border-border) solid
        var(--stratakit-color-border-neutral-muted);
    }
    .no-icon {
      /* "Filler" icon to take up the same space */
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
    }
    .message-index {
      user-select: none;
    }
    .content {
      text-wrap: wrap;
    }

    .message.info {
      color: var(--stratakit-color-text-neutral-tertiary);
    }
    .message.warning {
      color: var(--stratakit-color-text-attention-base);
    }
    .message.error {
      color: var(--stratakit-color-text-critical-base);
    }
    .message.special {
      font-style: italic;
      color: var(--stratakit-color-text-neutral-tertiary);
    }
  }
}
